<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>tabs</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="bootstrap-tabs/bootstrap-tabs.css"/>
</head>

<body>
<button id="btnAdd">add</button>
<button id="btnAdd1">不可删除tab</button>
<button id="btnAdd2">重复重新加载tab</button>
<div>
    <!-- Nav tabs -->
    <div class="col-xs-7">
        <div class="tabs-header">
            <div class="tabs-nav-wrap is-scrollable">
                <span class="tabs-nav-prev hidden" role="prev"><i class="fa fa-angle-left"></i></span>
                <span class="tabs-nav-next hidden" role="next"><i class="fa fa-angle-right"></i></span>
                <div class="tabs-nav-scroll">
                    <div role="tablist" class="tabs-nav" style="transform: translateX(0px);"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- Tab panes -->
    <div class="tab-content col-xs-7"></div>
</div>
</body>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bootstrap-contextmenu/bootstrap-contextmenu.js"></script>
<script src="bootstrap-tabs/bootstrap-tabs.js"></script>
<script>
    $(function () {
        let tabs = $.bootstrapTabs({container: ".tab-content", tabs: '.tabs-header'});
        tabs.paneHeightResize();
        $(window).resize(function () {
            tabs.paneHeightResize();
        });
        $("#btnAdd").on("click", function () {
            let i = parseInt(Math.random(0, 100000) * 100000 + "");
            tabs.addTap({index: i, title: i, url: "2.html"});
        });
        $("#btnAdd2").on("click", function () {
            let i = 999999;
            tabs.addTap({index: i, title: i, url: "2.html",reloadAble: true});
        });
        $("#btnAdd1").on("click", function () {
            let i = 888888;
            tabs.addTap({index: i, title: i, url: "2.html", closeAble: false});
        });
    });
</script>

</html>
